<script setup lang="ts">
import { reactive, ref } from 'vue';

const allCoupons=reactive([
    {
        couponId:101,
        couponName:"国庆优惠券",
        couponType:"满减",
        couponPrice:30,
        startTime:"2025-03-05",
        endTime:"2025-03-05",
        status:0 ,//0： 有效 1：已过期
        isDelete:0 //0：未删除，1：已删除
    },
        {
        couponId:102,
        couponName:"中秋优惠券",
        couponType:"满减",
        couponPrice:130,
        startTime:"2025-03-05",
        endTime:"2025-03-05",
        status:0, //0： 有效 1：已过期
        isDelete:0 //0：未删除，1：已删除
    },
        {
        couponId:103,
        couponName:"双11优惠券",
         couponType:"无门槛",
        couponPrice:230,
        startTime:"2025-03-05",
        endTime:"2025-03-05",
        status:0 ,//0： 有效 1：已过期
        isDelete:0 //0：未删除，1：已删除
    },
        {
        couponId:104,
        couponName:"618优惠券",
        couponType:"无门槛",
        couponPrice:100,
        startTime:"2025-03-05",
        endTime:"2025-03-05",
        status:1 ,//0： 有效 1：已过期
        isDelete:0 //0：未删除，1：已删除
    },
])

//输入框没东西的时候怎么全部显示
let iptCouponId=ref()
let iptCouponName=ref()

//比较的是原数组，显示的是filter之后的数组
let couponList=ref([...allCoupons])

function search(){
    if(!iptCouponId.value && !iptCouponId.value){
        //如果输入框都为空则返回全部值
        couponList.value=allCoupons
    }else{
        couponList.value=allCoupons.filter(c=>
            ((!iptCouponId.value || c.couponId===parseInt(iptCouponId.value))&&
            (!iptCouponName.value || c.couponName.includes(iptCouponName.value)))
        )
        console.log(couponList)
    }
}



//添加
const tempCoupon = ref({
        couponId:0,
        couponName:"",
        couponType:"",
        couponPrice:0,
        startTime:"",
        endTime:"",
        status: 0,//0： 有效 1：已过期
        isDelete: 0//0：未删除，1：已删除
})

//将对象添加到优惠券数组中,点提交的时候在添加
function pushCoupon(){
    allCoupons.push(tempCoupon.value)
}


//编辑
function edit(coupon){
    tempCoupon.value=coupon
}

</script>

<template>
    <div>
        优惠券id:<input type="text" v-model="iptCouponId">
        优惠卷名称:<input type="text" v-model="iptCouponName">
        <button @click="search()">搜索</button>
        <ul v-for="(coupon) in couponList" :key="coupon.couponId" >
            <!-- && coupon.couponId==searchId || coupon.couponName==searchName -->
            <li  v-if="coupon.isDelete===0 ">
                {{ coupon.couponId }}，
                {{ coupon.couponName }}，
                {{ coupon.couponType }}，
                {{ coupon.couponPrice }}，
                {{ coupon.startTime }}，
                {{ coupon.endTime }}，
                <span v-if="coupon.status==0">有效</span>
                <span v-else-if="coupon.status==1">已过期</span>
                <button @click="edit(coupon)">编辑</button>
                <button @click="coupon.isDelete=1">删除</button>
            </li>

        </ul>
        <h3>新增/修改优惠券</h3>
        <form action="myCouponForm">
            <ul>
                <li>优惠券id:<input type="number" v-model="tempCoupon.couponId"></li>
                <li>优惠券名称:<input type="text"  v-model="tempCoupon.couponName"></li>
                <li>优惠券类型:<select name="" id=""  v-model="tempCoupon.couponType">
                    <option value="">请选择类型</option>
                    <option value="满减">满减</option>
                    <option value="无门槛">无门槛</option>
                </select>
                </li>
                <li>优惠券价格:<input type="text"  v-model="tempCoupon.couponPrice"></li>
                <li>优惠券开始时间:<input type="date"  v-model="tempCoupon.startTime"></li>
                <li>优惠券结束时间:<input type="date"  v-model="tempCoupon.endTime"></li>
                <li>优惠券状态:
                    <select name="" id=""  v-model="tempCoupon.status">
                        <option value="">请选择优惠券的状态</option>
                        <option value="0">有效</option>
                        <option value="1">已过期</option>
                    </select>
                </li>
            </ul>
        </form>
        <button type="submit" @click="pushCoupon" >提交</button>
    </div>
</template>